<script setup>
import { defineProps, onMounted } from 'vue'

const props = defineProps({
  result: {
    type: Object,
    default: () => {}
  }
})

onMounted(() => {
  console.log(props.result)
})

</script>

<template>
  <div class="flex items-center justify-between mt-[20px]">
    <div>
        <div class="card-line-item text-center flex items-center justify-center">
            <div class="text-white text-sm">{{ props.result.VNFCount }}</div>
        </div>
        <div class="text-xs text-center mt-2">VNF使用数量</div>
    </div>

    <div>
        <div class="card-line-item text-center flex items-center justify-center">
            <div class="text-white text-sm">{{ props.result.time }}</div>
        </div>
        <div class="text-xs text-center mt-2">{{ props.result.time < 20 ? 'CIM计算时间/ms' : '经典计算时间/s' }}</div>
    </div>

    <div>
        <div class="card-line-item text-center flex items-center justify-center">
            <div class="text-white text-sm">{{ props.result.percent }}%</div>
        
        </div>
        <div class="text-xs text-center mt-2">需求满足度</div>
    </div>
  </div>
</template>

<style scoped>
.card-line-item {
  width: 94.67px;
  height: 32px;
  border: 1px solid #5C5F5F;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px 0px 0px 1px;
}
</style>